<template>
	<view class="">
		<!-- 使用自定义导航组件 -->
		<custom-navbar title="机构入驻" :showBack="true"></custom-navbar>
	</view>
	<view class="settlein-container">
		<!-- 	<view class="header">
			<view class="title">机构入驻</view>
			<view class="right-placeholder"></view>
		</view> -->
		<view class="form-container">
			<!-- 1. 机构名称 -->
			<view class="form-item">
				<view class="label required">1.机构名称</view>
				<input class="input" v-model="formData.name" placeholder="请输入机构名称" />
			</view>
			<!-- 2. 机构logo -->
			<!-- <view class="form-item">
				<view class="label required">2.机构logo</view>
				<view class="upload-container" @click="chooseLogo">
					<image v-if="formData.logo" :src="getOSSUrl(formData.logo)" class="uploaded-image" mode="aspectFit">
					</image>
					<view v-else class="upload-placeholder">
						<image src="/static/pecenter/pic.png" class="upload-icon" mode="aspectFit"></image>
						<text class="upload-text">图片上传</text>
					</view>
					<text class="file-tip">只能上传.png/.jpg文件，且不超过200KB</text>
				</view>
			</view> -->

			<!-- 3. 上传营业执照 -->
			<!-- <view class="form-item">
				<view class="label required">3.上传营业执照</view>
				<view class="upload-container" @click="chooseLicense">
					<image v-if="formData.license" :src="getOSSUrl(formData.license)" class="uploaded-image"
						mode="aspectFit"></image>
					<view v-else class="upload-placeholder">
						<image src="/static/pecenter/pic.png" class="upload-icon" mode="aspectFit"></image>
						<text class="upload-text">图片上传</text>
					</view>
					<text class="file-tip">只能上传.png/.jpg文件，且不超过200KB</text>
				</view>
			</view> -->

			<!-- 4. 上传图片 -->
			<!-- <view class="form-item">
				<view class="label required">4.上传图片</view>
				<text class="tip">备注：机构内环境、或是机构宣传图片</text>
				<view class="image-grid">
					<view v-for="(image, index) in formData.img" :key="index" class="image-item">
						<image :src="getOSSUrl(image)" class="grid-image" mode="aspectFit"></image>
						<view class="delete-icon" @click.stop="deleteImage(index)">×</view>
					</view>
					<view v-if="formData.img.length < 6" class="image-item add-item" @click="chooseImages">
						<view class="add-icon">+</view>
					</view>
				</view>
			</view> -->

			<!-- 12. 机构平米数 -->
			<view class="form-item">
				<view class="label required">2.机构平米数</view>
				<input class="input" v-model="formData.area" type="number" placeholder="请输入机构平米数（数值）"
					inputmode="numeric" pattern="[0-9]*" maxlength="5" />
				<text class="tip">备注：请输入数字，最多5位（如1200表示1200平米）</text>
			</view>

			<!-- 14. 机构类型 -->
			<view class="form-item">
				<view class="label required">3.机构类型</view>
				<button class="time-btn" @click="showTypeSelector = true">{{formData.type || '点击选择机构类型'}}</button>
				<!-- 当选择"其他"时显示的输入框 -->
				<input v-if="formData.type === '其他'" class="input" v-model="formData.othertype"
					placeholder="请输入其他机构类型的中文名称" maxlength="20" />
			</view>

			<!-- 机构类型选择弹出层 -->
			<view v-if="showTypeSelector" class="selector-overlay" @click="showTypeSelector = false">
				<view class="selector-content" @click.stop>
					<view class="selector-header">
						<text class="selector-title">选择机构类型</text>
						<view class="selector-close" @click="showTypeSelector = false">×</view>
					</view>
					<view class="selector-body">
						<view v-for="(item, index) in options.type" :key="index" class="selector-item"
							@click="selectInstitutionType(item)">
							{{item}}
						</view>
					</view>
				</view>
			</view>

			<!-- 15. 服务场景 -->
			<view class="form-item">
				<view class="label required">4.服务场景</view>
				<view class="checkbox-group">
					<view class="checkbox-item" v-for="(item, index) in options.servicetype" :key="index">
						<view class="checkbox" :class="{ checked: formData.servicetype.includes(item) }"
							@click="toggleScenario(item)">
							<text v-if="formData.servicetype.includes(item)">✓</text>
						</view>
						<text class="checkbox-text">{{item}}</text>
					</view>
				</view>
			</view>

			<!-- 16. 服务人群 -->
			<view class="form-item">
				<view class="label required">5.服务人群</view>
				<view class="checkbox-group">
					<view class="checkbox-item" v-for="(item, index) in options.servicecrowd" :key="index">
						<view class="checkbox" :class="{ checked: formData.servicecrowd.includes(item) }"
							@click="toggleGroup(item)">
							<text v-if="formData.servicecrowd.includes(item)">✓</text>
						</view>
						<text class="checkbox-text">{{item}}</text>
					</view>
				</view>
			</view>


			<!-- 5. 个人姓名 -->
			<view class="form-item">
				<view class="label required">6.联系人姓名</view>
				<input class="input" v-model="formData.person" placeholder="请输入您的姓名" />
			</view>

			<!-- 6. 公司职务 -->
			<view class="form-item">
				<view class="label required">7.联系人公司职务</view>
				<input class="input" v-model="formData.post" placeholder="请输入您的职务" />
			</view>

			<!-- 7. 联系电话 -->
			<view class="form-item">
				<view class="label required">8.联系人电话</view>
				<input class="input" v-model="formData.phone" type="tel" placeholder="请输入11位手机号码" maxlength="11"
					@input="validatePhone('phone', $event)" />
				<text v-if="errors.phone" class="error-tip">{{errors.phone}}</text>
			</view>

			<!-- 8. 机构联系电话 -->
			<view class="form-item">
				<view class="label required">9.机构联系电话</view>
				<input class="input" v-model="formData.tel" type="text" placeholder="请输入电话号码（支持手机或座机）"
					@input="validatePhone('tel', $event)" />
				<text v-if="errors.tel" class="error-tip">{{errors.tel}}</text>
			</view>

			<!-- 9. 机构位置 -->
			<view class="form-item">
				<view class="label required">10.机构位置</view>
				<new-area-selector :province="formData.province" :city="formData.city" :county="formData.county"
					placeholder="点击选择省市区" className="location-btn" @change="onAreaChange" />
			</view>

			<!-- 10. 机构详细地址 -->
			<view class="form-item">
				<view class="label required">11.机构详细地址</view>
				<input class="input" v-model="formData.address" placeholder="请输入您的详细地址" />
			</view>
			<!-- 13. 营业周期 -->
			<view class="form-item">
				<view class="label required">12.营业周期</view>
				<button class="time-btn" @click="showCycleSelector = true">{{formData.cycle || '点击选择营业周期'}}</button>
			</view>

			<!-- 营业周期选择弹出层 -->
			<view v-if="showCycleSelector" class="selector-overlay" @click="showCycleSelector = false">
				<view class="selector-content" @click.stop>
					<view class="selector-header">
						<text class="selector-title">选择营业周期</text>
						<view class="selector-close" @click="showCycleSelector = false">×</view>
					</view>
					<view class="selector-body">
						<view v-for="(item, index) in options.businessCycles" :key="index" class="selector-item"
							@click="selectBusinessCycle(item)">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<!-- 11. 机构开放时间 -->
			<view class="form-item">
				<view class="label">13.机构开放时间</view>
				<view class="time-container">
					<button class="time-btn" @click="chooseStartTime">{{formData.openstart || '点击选择开始时间'}}</button>
					<button class="time-btn" @click="chooseEndTime">{{formData.openend || '点击选择结束时间'}}</button>
				</view>
			</view>

			<!-- 17. 经纬坐标 -->
			<view class="form-item">
				<view class="label required">14.经纬坐标</view>
				<view class="coordinate-container">
					<view class="coordinate-info">
						<text class="coordinate-label">纬度：</text>
						<text class="coordinate-value">{{formData.lat || '未获取'}}</text>
					</view>
					<view class="coordinate-info">
						<text class="coordinate-label">经度：</text>
						<text class="coordinate-value">{{formData.lng || '未获取'}}</text>
					</view>
					<button class="get-location-btn" @click="getLocationCoordinates">自动获取</button>
				</view>
				<text v-if="errors.location" class="error-tip coordinate-error">{{errors.location}}</text>
				<text class="tip">备注：点击"自动获取"按钮获取当前位置的经纬度坐标</text>
			</view>


			<!-- 提交按钮 -->
			<view class="submit-container">
				<button class="submit-btn" @click="submitForm">点击提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import NewAreaSelector from '../../components/area-selector/new-area-selector.vue';
	import LocationManager from '../../utils/location.js'
	import {
		getInsFormSub
	} from '../../api/api.js'
	// import {
	// 	getOSSUrl
	// } from '../../utils/oss.js'
	import enhancedAuthManager from '../../utils/auth.js'
	import customNavbar from '../../components/custom-navbar/custom-navbar.vue';
	export default {
		components: {
			NewAreaSelector
		},
		computed: {
			getOSSUrl() {
				return getOSSUrl;
			}
		},
		data() {
			return {
				formData: {
					uid: 0, //TODO: 获取用户ID
					name: '',
					// logo: '',
					// license: '',
					// img: [],
					// 联系人姓名
					person: '',
					post: '',
					phone: '',
					tel: '',
					province: '',
					city: '',
					county: '',
					address: '',
					openstart: '',
					openend: '',
					area: '', // 机构平米数
					type: '', // 机构类型
					othertype: '', // 其他机构类型输入
					servicetype: [], // 服务场景（多选）
					servicecrowd: [], // 服务人群（多选）
					cycle: '', // 营业周期
					lat: '', // 纬度
					lng: '' // 经度
				},
				tempFilePath: '',
				errors: {
					phone: '',
					tel: '',
					location: ''
				},
				// 选择项数据
				options: {
					type: ['专业医疗', '心理教育', '心理培训', '心理产品', '线上服务平台', '企业咨询', '其他'],
					businessCycles: ['周一至周二', '周一至周三', '周一至周四', '周一至周五', '周一至周六', '周一至周日', '休息'],
					servicetype: ['企业EAP', '大中小学校', '社区服务', '特殊群体'],
					servicecrowd: ['儿童青少年', '大学生', '职场人士', '家庭关系', '老年'],
				},
				// 弹出层状态
				showTypeSelector: false,
				showCycleSelector: false
			}
		},
		created() {
			this.formData.uid = enhancedAuthManager.getUserInfo().id; //设置用户id
		},
		methods: {
			// 验证手机号码
			validatePhone(field, event) {
				const value = event.detail.value

				// 联系电话字段保持原有验证逻辑
				if (field === 'phone') {
					const phoneRegex = /^1[3-9]\d{9}$/

					// 清除非数字字符
					const numericValue = value.replace(/\D/g, '')
					if (numericValue !== value) {
						this.formData[field] = numericValue
						return
					}

					// 验证格式
					if (numericValue.length > 0 && numericValue.length < 11) {
						this.errors[field] = '请输入11位手机号码'
					} else if (numericValue.length === 11 && !phoneRegex.test(numericValue)) {
						this.errors[field] = '请输入正确的手机号码'
					} else {
						this.errors[field] = ''
					}
				}
				// 机构联系电话支持手机和座机
				else if (field === 'tel') {
					// 保留特殊字符
					const phoneRegex = /^1[3-9]\d{9}$/ // 手机号
					const telRegex = /^0\d{2,3}-?\d{7,8}$/ // 座机号格式: 010-12345678 或 01012345678

					// 验证格式
					if (value.length > 0) {
						if (!phoneRegex.test(value.replace(/\D/g, '')) && !telRegex.test(value)) {
							this.errors[field] = '请输入正确的电话号码（手机或座机）'
						} else {
							this.errors[field] = ''
						}
					} else {
						this.errors[field] = ''
					}
				}
			},

			// 返回上一页
			navigateBack() {
				uni.navigateBack()
			},

			// 自动获取经纬度坐标
			async getLocationCoordinates() {
				try {
					uni.showLoading({
						title: '获取位置中...'
					})

					// 调用位置管理工具获取坐标
					const location = await LocationManager.getUserLocation(true)

					// 添加防御性检查
					if (!location || typeof location !== 'object') {
						throw new Error('获取位置信息失败')
					}

					// 设置获取到的坐标
					this.formData.lat = location.latitude ? location.latitude.toFixed(6) : ''
					this.formData.lng = location.longitude ? location.longitude.toFixed(6) : ''
					this.errors.location = ''

					uni.showToast({
						title: '坐标获取成功',
						icon: 'success'
					})

					// 如果城市信息可用，自动填充省市区
					if (location.cityInfo) {
						this.formData.province = location.cityInfo.province || this.formData.province
						this.formData.city = location.cityInfo.city || this.formData.city
						this.formData.county = location.cityInfo.county || this.formData.county
					}
				} catch (error) {
					console.error('获取坐标失败:', error)
					this.errors.location = '获取坐标失败，请重试'
					uni.showToast({
						title: '获取坐标失败，请检查定位权限',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 选择logo
			// chooseLogo() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		sizeType: ['compressed'],
			// 		sourceType: ['album', 'camera'],
			// 		success: (res) => {
			// 			const tempFilePath = res.tempFilePaths[0]
			// 			this.uploadFile(tempFilePath, 'logo')
			// 		}
			// 	})
			// },

			// 选择营业执照
			// chooseLicense() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		sizeType: ['compressed'],
			// 		sourceType: ['album', 'camera'],
			// 		success: (res) => {
			// 			const tempFilePath = res.tempFilePaths[0]
			// 			this.uploadFile(tempFilePath, 'license')
			// 		}
			// 	})
			// },

			// 选择多张图片
			// chooseImages() {
			// 	uni.chooseImage({
			// 		count: 6 - this.formData.img.length,
			// 		sizeType: ['compressed'],
			// 		sourceType: ['album', 'camera'],
			// 		success: (res) => {
			// 				res.tempFilePaths.forEach(path => {
			// 					this.uploadFile(path, 'img')
			// 				})
			// 			}
			// 	})
			// },

			// 删除图片
			// async deleteImage(index) {
			// 	try {
			// 		// 获取要删除的文件URL
			// 		const fileUrl = this.formData.img[index]

			// 		// 显示确认对话框
			// 		const res = await new Promise((resolve) => {
			// 			uni.showModal({
			// 				title: '确认删除',
			// 				content: '确定要删除这张图片吗？',
			// 				confirmText: '删除',
			// 				cancelText: '取消',
			// 				success: resolve
			// 			})
			// 		})

			// 		if (res.confirm) {
			// 			// 用户确认删除，调用OSS删除接口
			// 			uni.showLoading({ title: '删除中...' })

			// 			await deleteOSSFileForAgency(fileUrl)

			// 			// 从本地数组中移除
			// 			this.formData.img.splice(index, 1)

			// 			uni.hideLoading()
			// 			uni.showToast({
			// 				title: '删除成功',
			// 				icon: 'success'
			// 			})
			// 		}
			// 	} catch (error) {
			// 		uni.hideLoading()
			// 		console.error('删除图片失败:', error)

			// 		// 即使OSS删除失败，也从本地数组中移除（避免界面异常）
			// 		this.formData.img.splice(index, 1)

			// 		uni.showToast({
			// 			title: '删除失败，但已从列表中移除',
			// 			icon: 'none'
			// 		})
			// 	}
			// },

			// 上传文件
			// async uploadFile(filePath, type) {
			// 	try {
			// 		// 验证参数
			// 		if (!filePath || !type) {
			// 			console.error('上传参数错误:', { filePath, type })
			// 			uni.showToast({
			// 				title: '上传参数错误',
			// 				icon: 'none'
			// 			})
			// 			return
			// 		}

			// 		// 确保formData.img是数组
			// 		if (!Array.isArray(this.formData.img)) {
			// 			this.formData.img = []
			// 		}

			// 		uni.showLoading({
			// 			title: '上传中...'
			// 		})

			// 		// 调用实际的上传API
			// 		const result = await uploadImageForAgency(filePath, type)
			// 		// console.log('上传API返回结果:', result)

			// 		// 验证返回数据
			// 		if (!result || typeof result !== 'object') {
			// 			throw new Error('上传返回数据格式错误')
			// 		}

			// 		// 上传成功，更新表单数据
			// 		// 注意：新的STS上传返回的url是key路径，不含域名前缀
			// 		if (type === 'logo') {
			// 			if (result.url) {
			// 				this.formData.logo = result.url
			// 			}
			// 		} else if (type === 'license') {
			// 			if (result.url) {
			// 				this.formData.license = result.url
			// 			}
			// 		} else if (type === 'img') {
			// 			if (result.url) {
			// 				this.formData.img.push(result.url)
			// 			}
			// 		}

			// 		// console.log('上传后表单数据:', { logo: this.formData.logo, license: this.formData.license, img: this.formData.img })

			// 		uni.hideLoading()
			// 		uni.showToast({
			// 			title: '上传成功',
			// 			icon: 'success'
			// 		})
			// 	} catch (error) {
			// 		uni.hideLoading()
			// 		const errorMsg = error.message || '上传失败'
			// 		// console.error('文件上传错误:', error)

			// 		// 显示更友好的错误提示
			// 		if (errorMsg.includes('解析响应失败')) {
			// 			uni.showToast({
			// 				title: '服务器响应格式错误',
			// 				icon: 'none',
			// 				duration: 3000
			// 			})
			// 		} else if (errorMsg.includes('网络') || errorMsg.includes('连接')) {
			// 			uni.showToast({
			// 				title: '网络连接失败，请检查网络设置',
			// 				icon: 'none',
			// 				duration: 3000
			// 			})
			// 		} else {
			// 			uni.showToast({
			// 				title: errorMsg,
			// 				icon: 'none',
			// 				duration: 3000
			// 			})
			// 		}
			// 	}
			// },

			// 处理省市区选择变化
			onAreaChange(data) {
				this.formData.province = data.province;
				this.formData.city = data.city;
				this.formData.county = data.county;
			},

			// 选择开始时间
			chooseStartTime() {
				// console.log('选择开始时间按钮被点击 - 开始执行');
				const startOptions = ['08:00', '09:00', '10:00', '11:00', '12:00'];

				try {
					// console.log('尝试显示开始时间选择框');
					// 使用原生的ActionSheet让用户选择时间
					uni.showActionSheet({
						itemList: startOptions,
						success: (res) => {
							if (res.tapIndex !== undefined) {
								this.formData.openstart = startOptions[res.tapIndex];
								// console.log('开始时间已设置为:', this.formData.openstart);
							}
						},
						fail: (err) => {
							// console.error('开始时间选择失败:', err);
						}
					});
				} catch (e) {
					// console.error('开始时间设置异常:', e);
				}
			},

			// 选择结束时间
			chooseEndTime() {
				// console.log('选择结束时间按钮被点击 - 开始执行');
				const endOptions = ['17:00', '18:00', '19:00', '20:00', '21:00'];

				try {
					// console.log('尝试显示结束时间选择框');
					// 使用原生的ActionSheet让用户选择时间
					uni.showActionSheet({
						itemList: endOptions,
						success: (res) => {
							if (res.tapIndex !== undefined) {
								this.formData.openend = endOptions[res.tapIndex];
								// console.log('结束时间已设置为:', this.formData.openend);
							}
						},
						fail: (err) => {
							// console.error('结束时间选择失败:', err);
						}
					});
				} catch (e) {
					// console.error('结束时间设置异常:', e);
				}
			},

			// 选择机构类型 - 点击按钮显示弹出层
			chooseInstitutionType() {
				this.showTypeSelector = true;
			},

			// 从弹出层中选择机构类型
			selectInstitutionType(item) {
				this.formData.type = item;
				// 如果选择的不是"其他"，清空之前输入的其他机构类型
				if (item !== '其他') {
					this.formData.othertype = '';
				}
				this.showTypeSelector = false;
			},

			// 从弹出层中选择营业周期
			selectBusinessCycle(item) {
				this.formData.cycle = item;
				this.showCycleSelector = false;
			},

			// 切换服务场景选择
			toggleScenario(item) {
				const index = this.formData.servicetype.indexOf(item);
				if (index > -1) {
					// 如果已选中，则移除
					this.formData.servicetype.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.formData.servicetype.push(item);
				}
			},

			// 切换服务人群选择
			toggleGroup(item) {
				const index = this.formData.servicecrowd.indexOf(item);
				if (index > -1) {
					// 如果已选中，则移除
					this.formData.servicecrowd.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.formData.servicecrowd.push(item);
				}
			},

			// 验证经纬度坐标
			validateCoordinates() {
				// 添加防御性检查，确保formData存在
				if (!this.formData) {
					uni.showToast({
						title: '表单数据未初始化',
						icon: 'none'
					})
					return false
				}

				// 验证纬度
				if (!this.formData.lat) {
					uni.showToast({
						title: '请点击自动获取按钮获取坐标',
						icon: 'none'
					})
					return false
				}
				const lat = parseFloat(this.formData.lat)
				if (isNaN(lat) || lat < -90 || lat > 90) {
					uni.showToast({
						title: '获取的纬度无效',
						icon: 'none'
					})
					return false
				}

				// 验证经度
				if (!this.formData.lng) {
					uni.showToast({
						title: '请点击自动获取按钮获取坐标',
						icon: 'none'
					})
					return false
				}
				const lng = parseFloat(this.formData.lng)
				if (isNaN(lng) || lng < -180 || lng > 180) {
					uni.showToast({
						title: '获取的经度无效',
						icon: 'none'
					})
					return false
				}

				return true
			},

			// 提交表单
			async submitForm() {
				// 表单验证
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入机构名称',
						icon: 'none'
					})
					return
				}
				// if (!this.formData.logo) {
				// 	uni.showToast({
				// 		title: '请上传机构logo',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (!this.formData.license) {
				// 	uni.showToast({
				// 		title: '请上传营业执照',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.formData.img.length === 0) {
				// 	uni.showToast({
				// 		title: '请至少上传一张图片',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (!this.formData.person) {
					uni.showToast({
						title: '请输入联系人姓名',
						icon: 'none'
					})
					return
				}
				if (!this.formData.post) {
					uni.showToast({
						title: '请输入联系人公司职务',
						icon: 'none'
					})
					return
				}
				if (!this.formData.phone || !/^1[3-9]\d{9}$/.test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确的联系人电话',
						icon: 'none'
					})
					return
				}
				if (!this.formData.tel) {
					uni.showToast({
						title: '请输入机构联系电话',
						icon: 'none'
					})
					return
				}
				// 验证机构联系电话格式（支持手机和座机）
				const phoneRegex = /^1[3-9]\d{9}$/
				const telRegex = /^0\d{2,3}-?\d{7,8}$/
				if (!phoneRegex.test(this.formData.tel.replace(/\D/g, '')) && !telRegex.test(this.formData
						.tel)) {
					uni.showToast({
						title: '请输入正确的机构联系电话（手机或座机）',
						icon: 'none'
					})
					return
				}
				if (!this.formData.province || !this.formData.city || !this.formData.county) {
					uni.showToast({
						title: '请选择完整的省市区信息',
						icon: 'none'
					})
					return
				}
				if (!this.formData.address) {
					uni.showToast({
						title: '请输入机构详细地址',
						icon: 'none'
					})
					return
				}

				// 验证经纬度坐标
				if (!this.validateCoordinates()) {
					return
				}
				if (!this.formData.area) {
					uni.showToast({
						title: '请输入机构平米数',
						icon: 'none'
					})
					return
				}
				// 验证机构平米数是否为有效数字
				const areaValue = parseInt(this.formData.area)
				if (isNaN(areaValue) || areaValue <= 0) {
					uni.showToast({
						title: '请输入有效的机构平米数',
						icon: 'none'
					})
					return
				}
				if (!this.formData.cycle) {
					uni.showToast({
						title: '请选择营业周期',
						icon: 'none'
					})
					return
				}
				if (!this.formData.type) {
					uni.showToast({
						title: '请选择机构类型',
						icon: 'none'
					})
					return
				}
				// 如果选择了"其他"，则必须输入其他机构类型
				if (this.formData.type === '其他' && !this.formData.othertype.trim()) {
					uni.showToast({
						title: '请输入其他机构类型的中文名称',
						icon: 'none'
					})
					return
				}
				// 如果输入了其他机构类型，验证是否为中文
				if (this.formData.othertype && !/^[\u4e00-\u9fa5]+$/.test(this.formData.othertype
						.trim())) {
					uni.showToast({
						title: '其他机构类型请输入中文名称',
						icon: 'none'
					})
					return
				}
				if (this.formData.servicetype.length === 0) {
					uni.showToast({
						title: '请至少选择一个服务场景',
						icon: 'none'
					})
					return
				}
				if (this.formData.servicecrowd.length === 0) {
					uni.showToast({
						title: '请至少选择一个服务人群',
						icon: 'none'
					})
					return
				}
				// 开始时间和结束时间均为非强制项
				// 允许用户根据实际需求选择是否设置时间段

				// 提交表单数据
				try {
					uni.showLoading({
						title: '提交中...'
					})

					// 准备提交的数据
					const submitData = {
						...this.formData,
						// 处理多选字段
						servicetype: this.formData.servicetype.join(','),
						servicecrowd: this.formData.servicecrowd.join(',')
					}

					// 调用实际的提交API - 使用getInsFormSub函数提交机构入驻表单数据
					const result = await getInsFormSub(submitData)

					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000,
						success: () => {
							// 提交成功后返回上一页
							setTimeout(() => {
								this.navigateBack()
							}, 2000)
						}
					})
				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: error.message || '提交失败，请重试',
						icon: 'none'
					})
					console.error('表单提交错误:', error)
				}
			}
		}
	}
</script>

<style scoped>
	.settlein-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		margin-top: 190rpx;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.back-btn {
		font-size: 36rpx;
		color: #333;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin: 0rpx auto;
	}

	.right-placeholder {
		width: 36rpx;
	}

	.form-container {
		padding: 30rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.label {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 30rpx;
	}

	.required::after {
		content: '*';
		color: #f00;
		margin-left: 4rpx;
	}

	.input {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #333;
		box-sizing: border-box;
	}

	.upload-container {
		width: 100%;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	.upload-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
	}

	.upload-text {
		font-size: 28rpx;
		color: #999;
	}

	.uploaded-image {
		width: 180rpx;
		height: 180rpx;
	}

	.file-tip {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.tip {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
		display: block;
	}

	.error-tip {
		font-size: 24rpx;
		color: #f00;
		margin-top: 10rpx;
		display: block;
	}

	.image-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.image-item {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
		position: relative;
	}

	.image-item:nth-child(4n) {
		margin-right: 0;
	}

	.grid-image {
		width: 100%;
		height: 100%;
	}

	.delete-icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-item {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f0f0f0;
	}

	.add-icon {
		font-size: 60rpx;
		color: #999;
	}

	.location-btn,
	.time-btn {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		font-size: 30rpx;
		color: #333;
		text-align: left;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
	}

	.time-btn:active {
		background-color: #f5f5f5;
	}

	.time-container {
		display: flex;
		flex-direction: column;
	}

	/* 机构类型选择弹出层样式 */
	.selector-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 999;
	}

	.selector-content {
		width: 100%;
		max-height: 70vh;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
	}

	.selector-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.selector-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}

	.selector-close {
		font-size: 48rpx;
		color: #999;
	}

	.selector-body {
		max-height: calc(70vh - 98rpx);
		overflow-y: auto;
	}

	.selector-item {
		padding: 30rpx;
		font-size: 32rpx;
		color: #333;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.selector-item:active {
		background-color: #f5f5f5;
	}

	/* 多选框样式 */
	.checkbox-group {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
	}

	.checkbox-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		background-color: #fff;
	}

	.checkbox.checked {
		background-color: #1296db;
		border-color: #1296db;
	}

	.checkbox.checked text {
		color: #fff;
		font-size: 24rpx;
	}

	.checkbox-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 经纬度输入框样式 */
	.coordinate-container {
		background-color: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
	}

	.coordinate-item {
		margin-bottom: 20rpx;
	}

	.coordinate-item:last-child {
		margin-bottom: 0;
	}

	.coordinate-label {
		display: inline-block;
		width: 120rpx;
		font-size: 28rpx;
		color: #333;
	}

	.coordinate-input {
		width: calc(100% - 120rpx);
		display: inline-block;
	}

	.coordinate-error {
		display: block;
		margin-left: 120rpx;
	}

	/* 坐标信息显示样式 */
	.coordinate-info {
		margin-bottom: 20rpx;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
	}

	.coordinate-info:last-child {
		margin-bottom: 20rpx;
	}

	.coordinate-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	/* 自动获取位置按钮样式 */
	.get-location-btn {
		width: 100%;
		height: 80rpx;
		background-color: #98A6E4;
		color: #fff;
		font-size: 28rpx;
		border: none;
		border-radius: 8rpx;
		margin-top: 10rpx;
	}

	.submit-container {
		margin-top: 60rpx;
	}

	.submit-btn {
		width: 100%;
		height: 96rpx;
		background-color: #98A6E4;
		color: #fff;
		font-size: 40rpx;
		font-weight: 545;
		border: none;
		border-radius: 48rpx;
	}
</style>